<template>
  <k-view class="search-page-container">
    <k-view ref="headerEl" class="banner flex-between">
      <search-input
        placeholder="请输入股票名称或代码"
        @on-change="search"
        @on-clear="search"
        v-model="searchVal"
      ></search-input>
      <k-text class="search-btn" @click="search">搜索</k-text>
    </k-view>
    <k-view class="hot-list" v-show="!searchVal">
      <k-text class="content-title">同花顺热榜</k-text>
      <StockItem
        v-for="({ stockCode, stockName, market }, index) in hotStockList"
        :key="stockCode"
        :stockName="stockName"
        :stockCode="stockCode"
        :sequence="index + 1"
        :hasPk="false"
        @click.native="goStockPage({ stockCode, stockName, market })"
      />
    </k-view>
    <k-view class="search-scroller">
      <empty-view
        v-show="(isEmpty || isLoading) && searchVal"
        :loading="isLoading"
        msg="没有找到相关结果"
        height="130vw"
      ></empty-view>
      <k-view
        v-show="!isEmpty && !isLoading && searchVal"
        class="list-item"
        v-for="li in resultArr"
        :key="li.stockCode"
        @click="goStockPage(li)"
      >
        <k-view class="stock-name-view">
          <k-text class="stock-name">{{ li.stockName }}</k-text>
        </k-view>
        <k-view class="stock-info-view">
          <k-text :class="['stock-market-label', li.marketLabelClass]">{{ li.marketLabel }}</k-text>
          <k-text class="stock-code">{{ li.stockCode }}</k-text>
        </k-view>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
import SearchInput from '../../components/Home/searchInput.vue';
import emptyView from '@/components/Home/emptyView.vue';
import StockItem from '@/components/StockDiagnosis/stockItem.vue';
import { searchStockInfo, getHotStockList } from '@/apis';
import { jumpByUrl, setCookie } from '@/utils';
import themeMixin from '../../mixins/themeMixin';
import { sendClickStat, sendPageStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';
import Apis from '@king-fisher/apis';

const codeTypeName = ['沪A', '深A', '京A', '科创', '创'];

export default {
  components: {
    SearchInput,
    emptyView,
    StockItem,
  },
  data() {
    return {
      searchVal: '',
      resultArr: [],
      isLoading: false,
      hotStockList: [],
    };
  },
  computed: {
    isEmpty() {
      return this.resultArr.length === 0;
    },
  },
  mixins: [themeMixin],
  methods: {
    getHotStock() {
      getHotStockList()
        .then(res => {
          if (res.status_code) {
            Apis.Toast.show('暂未查询到相关信息');
            return;
          }
          const stockList = res.data.stock_list.slice(0, 10);
          const hotStockList = stockList.map(item => ({
            stockCode: item.code,
            stockName: item.name,
            market: item.market,
          }));
          this.hotStockList.push(...hotStockList);
        })
        .catch(() => {
          Apis.Toast.show('数据异常请稍后重试！');
        });
    },
    search() {
      if (!this.searchVal) {
        return;
      }
      this.isLoading = true;
      this.resultArr = [];
      searchStockInfo(this.searchVal).then(res => {
        this.resultArr = this.handleOriginData(res.data?.body || []);
        this.isLoading = false;
      });
    },
    handleOriginData(list) {
      if (list && list.length > 0) {
        const dataList = [];
        list.forEach(item => {
          //过滤搜索结果
          if (codeTypeName.indexOf(item[5]) !== -1) {
            dataList.push({
              stockCode: item[0] || '',
              stockName: item[1] || '',
              market: item[3] || '',
              marketLabel: item[5] || '',
              marketLabelClass: item[5] === '京A' ? 'grey' : 'orange',
            });
          }
        });
        return dataList;
      } else {
        return [];
      }
    },
    goStockPage(info) {
      sendClickStat(`${PAGEID.SEARCH}.click.${[info.stockCode]}`);
      jumpByUrl({
        name: 'stock',
        query: {
          stockCode: info.stockCode,
          market: info.market,
          stockName: info.stockName,
        },
      });
    },
  },
  mounted() {
    setCookie().then(id => {
      sessionStorage.setItem('userIdKey', id);
      sendPageStat(`${PAGEID.SEARCH}`);
    });
    this.getHotStock();
  },
};
</script>

<style lang="less" scoped>
.search-page-container {
  background-color: #ffffff;
  padding-top: 124px;
  .banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 44px;
    padding-left: 32px;
    z-index: 50;
    background: #ffffff;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .search-box {
    height: calc(100vh - 88px);
  }
  .search-btn {
    width: 120px;
    height: 56px;
    font-size: 28px;
    color: #323232;
    line-height: 56px;
    text-align: center;
  }
  .list-item {
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 12px;
    box-sizing: border-box;
    white-space: normal;
    border-bottom: 1px solid #e5e5e5;
    .stock-name {
      color: #262626;
      font-size: 28px;
    }
    .stock-info-view {
      display: flex;
      align-items: center;
    }
    .stock-market-label {
      padding: 0px 8px;
      font-size: 18px;
      transform: scale(0.8);
      border-radius: 2px;
    }
    .stock-market-label.orange {
      background-color: #feb04b;
      color: #ffffff;
    }
    .stock-market-label.grey {
      background-color: #b5bacc;
      color: #ffffff;
    }
    .stock-code {
      color: #b3b3b3;
      font-size: 24px;
      transform: scale(0.8);
    }
  }
  .search-scroller {
    width: calc(100vw - 64px);
    margin: 0 auto;
    box-sizing: border-box;
  }
  .hot-list {
    width: 100vw;
    background: linear-gradient(
      180deg,
      rgba(255, 80, 80, 0.05) 0%,
      rgba(255, 80, 80, 0) 21.84%,
      rgba(255, 80, 80, 0) 100%
    );
    padding: 32px 32px 0 32px;
    /deep/.stock-item:not(:last-child) {
      border-bottom: 1px solid #ebebeb;
    }
    .content-title {
      color: rgba(38, 38, 38, 1);
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36px;
    }
  }
}

[theme-mode='black'] {
  .search-page-container {
    background-color: #0f0f0f;
    .banner {
      background-color: #0f0f0f;
    }
    .search-btn {
      color: rgba(255, 255, 255, 0.6);
    }
    .list-item {
      border-bottom-color: rgba(255, 255, 255, 0.6);
      .stock-name {
        color: rgba(255, 255, 255, 0.84);
      }
    }
    .hot-list {
      .content-title {
        color: hsla(0, 0%, 100%, 0.84);
      }
      /deep/.stock-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
    }
  }
}
</style>
